JS漫遊記-27-背景變色

2024 iThome 鐵人賽

DAY 27

自我挑戰組

JS漫遊記系列第 27 篇

16th鐵人賽 js javascript js漫遊記學習筆記

joycechou_914

2024-09-08 23:07:29

207 瀏覽

分享至

嗨嗨~今天又是假期的最後一天了~
大家有出門去踏踏青嗎~
今天也想說來個js的舉例小遊戲~
背景變色辣~

html



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>點擊變色遊戲</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="colorButton">點擊我變色</button>
</body>
</html>

css


body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

button {
    padding: 20px 40px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


document.getElementById('colorButton').onclick = () => {
    const randomColor = '#' + ('000000' + Math.floor(Math.random() * 0xFFFFFF).toString(16)).slice(-6);
    document.body.style.backgroundColor = randomColor;
};

document.getElementById('colorButton')：選擇 ID 為 colorButton 的按鈕元素。
.onclick = () => {...}：使用onclick的方法，按下去按鈕則可進行便)，兼箭頭函數
document.body.style.backgroundColor = randomColor;：將生成的顏色設置為頁面的背景顏色。

以下都要來解釋一下，這段程式碼~
const randomColor = '#' + ('000000' + Math.floor(Math.random() * 0xFFFFFF).toString(16)).slice(-6);：生成六位數的隨機顏色代碼。

Math.random() * 0xFFFFFF
Math.random()：這是一個內建的 JavaScript 函數，會返回一個在 [0, 1) 範圍內的隨機數（不包括 1）。
0xFFFFFF：這是十六進制表示的 16777215，對應於 RGB 顏色空間中的最大值（即 #FFFFFF，代表白色）。
Math.random() * 0xFFFFFF：生成一個從 0 到 16777215（即 0xFFFFFF）之間的隨機數。

Math.floor(...)
Math.floor()：這個函數會對數字向下取整到最接近的整數。
Math.floor(Math.random() * 0xFFFFFF)：將上述隨機數取到整數。

.toString(16)
.toString(16)：將整數轉換為十六進制格式的字符串。16 代表十六進制進制。
(16制用來表示顯示顏色)

'000000' + ...
('000000' + ...)：將生成的十六進制字符串前面加上 '000000'，以確保即使生成的顏色代碼短於 6 位，最終的字符串長度也會達到 6 位。
例如，如果生成的顏色代碼是 'ff'，則加上 '000000' 會變成 '000000ff'。

.slice(-6)
.slice(-6)：從右邊截取最後 6 個字符。
如果生成的顏色代碼本來就是 6 位數，這一步就沒有影響；如果是 4 位數或更少，這一步會保證結果是 6 位數。例如 '0000ff' 被截取為 '0000ff'，而 'ff' 被截取為 '0000ff'。

整體過程